<template>
  <div class="attributive-analysis" v-drag>
    <div class="title">
      <span>多维属性分析</span>
      <span class="close" @click="handleClose">x</span>
    </div>
    <div ref="attrChart" class="arrt-chart"></div>
  </div>
</template>

<script>
import dynamic from '../../assets/data/dynamic.json'
let dynamic_fields = dynamic[0].dynamic_fields;
import { vm, SEND } from "../../utils/eventManage";
export default {
  data() {
    return {
      popList: [],
      myChart: null,
      global: 0
    };
  },
  mounted() {
      vm.$on(SEND.setPopup, data => {
        let arr = data.data;
        this.popList = arr;

        if(this.myChart){

          let data = this.getData();
          this.myChart.setOption({
            series: data.series
          });

        }else{
          this.addParallel();
        }
      });
  },
  methods: {
    handleClose() {
      vm.$off(SEND.setPopup);
      this.$emit("closeAttr");
    },
    getData() {
      let series = [];
      let schema = dynamic_fields;

      for (let [index, item] of this.popList.entries()) {
        let attrInfo = item.attrInfo;

        series.push({
          name: item.name,
          type: "parallel",
          lineStyle: {
            width: 1,
            opacity: 0.5
          },
          data: [[
            attrInfo.temperature,
            attrInfo.pressure,
            attrInfo.humidity,
            attrInfo.mach,
            attrInfo.gas,
            attrInfo.pitch
          ]]
        });
      }
      schema = schema.map((el, index) => {
        return {
          dim: index,
          name: el.name
        };
      });
      return {
        series,
        schema
      };
    },
    addParallel() {

      let data = this.getData();

      this.myChart = this.$echarts.init(this.$refs.attrChart);
      this.myChart.setOption({
        animationDuration: 0,
        animationDurationUpdate: 0,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        backgroundColor: "#333",
        legend: {
          bottom: 30,
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#222",
          borderColor: "#777",
          borderWidth: 1
        },
        parallelAxis: data.schema,
        parallel: {
          left: 80,
          right: 50,
          bottom: 100,
          parallelAxisDefault: {
            type: "value",
            nameLocation: "end",
            nameGap: 20,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12
            },
            axisLine: {
              lineStyle: {
                color: "#aaa"
              }
            },
            axisTick: {
              lineStyle: {
                color: "#777"
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: "#fff",
            }
          }
        },
        series:data.series
      });
    }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.attributive-analysis {
  width: 500px;
  height: 350px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 100px;
  top: 100px;
  z-index: 5;
  color: #fff;
  .title {
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #fff;
    .close {
      cursor: pointer;
    }
  }
  .arrt-chart {
    width: 500px;
    height: 300px;
  }
}
</style>
